import React, { FC } from 'react';
import styled from 'styled-components';
import ImageView from '@/components/BaseComponent/ImageView'
import {history} from 'umi'

interface IProps {
  src?: string,
  title?: string,
  content: string,
  num?:number,
  goodsArr?: any[],
  id?: number
}

const Card: FC<IProps> = (props) => {
  const { src, title, content, id } = props;
  return <CardContainer className="card-wrapper">
    <div className="img-box">
      <ImageView src={src}/>
    </div>
    <div className="content-box" onClick={()=>{
      history.push('/productDetail',id)
    }}>
      <span className="title">{title}</span>
      <span className="content" dangerouslySetInnerHTML={{__html: content}}></span>
    </div>
  </CardContainer>
}

Card.defaultProps = {
  src:require('../../assets/age.png'),
  title: '标题',
  num:120,
  content: '何来疯狂了多少反馈何来疯狂了多少反馈何来疯狂了多少反馈何来疯狂了多少反馈何来疯狂了多少反馈何来疯狂了多少反馈何来疯狂了多少反馈何来疯狂了多少反馈'
}

export default Card;

const CardContainer = styled.div`
  padding: .1rem;
  display: flex;
  background: #fff;
  .img-box {
    flex: 4;
    padding:0.1rem;
    height: 2rem;
    /* border-radius: 10px;
    border: 1px solid #eee; */
    img{
      width:100%;
      height:100%;
    }
  }
  .content-box {
    position: relative;
    flex: 9;
    margin-left: 0.3rem;
    padding-right: .2rem;
    .title {
      display:block;
      color: #333333;
      font-size: .5rem;
    }
    .content {
      line-height: .5rem;
      display: -webkit-box;
      display: -moz-box;
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;   /*显示行数*/
      color:#666666;
    }
  }
  .content-box:after {
    position: absolute;
    content: '';
    width: 100%;
    display: block;
    height: .01rem;
    background:#E5E5E5;
    /* background: red; */
    bottom:0;
    left: -5px;
  }
`;
